<template>
  <div>
    <h-row>
      <div class="blue-line">
        <h2>清算流程</h2>
      </div>
    </h-row>
    <!-- <h-row>
      <h-progress
        :percent="percent"
        status="active"
        style="margin-top: 3vh; margin-bottom: 3vh"
      ></h-progress>
    </h-row> -->

    <h-row style="margin-top: 3vh">
      <h-col span="8" offset="4" class="animate__animated animate__fadeInLeft">
        <h-steps :current="current" direction="vertical" style="padding: 5vh">
          <h-step title="日初始化" content="更新当前产品净值"></h-step>
          <h-step title="交易确认" content="确认前一交易日的订单"></h-step>
          <h-step title="订单清算" content="清算已确认的订单"></h-step>
          <h-step
            title="清算完成"
            content="完成当前工作日的清算工作"
          ></h-step> </h-steps
      ></h-col>
      <h-col span="8" class="card1 animate__animated animate__fadeInRight">
        <vue2-org-tree
          name="test"
          :data="datas"
          :label-class-name="labelClassName"
          style="margin-left: 10vh"
        >
        </vue2-org-tree
      ></h-col>
    </h-row>

    <h-row>
      <div class="button-container animate__animated animate__fadeInUp">
        <h-button v-show="current === -1" type="primary" @click="liquidation"
          >开始清算</h-button
        >
        <h-button v-show="current != -1" type="primary" @click="next"
          >下一步</h-button
        >
      </div>
    </h-row>
  </div>
</template>

<script>
import "vue2-org-tree/dist/style.css";
import { initialization, check } from "@/api/liquidation";
export default {
  data() {
    return {
      current: -1,
      percent: 0,
      isInitialization: false,
      isCheck: false,
      // labelClassName: "org-bg-res",
      updatedNodes: [0],
      datas: {
        id: 0,
        label: "清算流程",
        children: [
          {
            id: 1,
            label: "日初始化",
          },
          {
            id: 2,
            label: "交易确认",
            children: [
              {
                id: 3,
                label: "订单清算",
                children: [
                  {
                    id: 4,
                    label: "清算完成",
                  },
                ],
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    liquidation() {
      initialization()
        .then((res) => {
          // console.log(res);
          this.isInitialization = true;
          if (this.isInitialization) {
            this.$hMsgBox.success({
              title: "日初始化完成！",
              content: "已完成日初始化",
            });
            this.updatedNodes.push(1);
            this.updatedNodes.push(2);
            console.log(this.updatedNodes);
            this.add();
            this.add();
          }
        })
        .catch((err) => {
          console.log(err);
          this.$hMsgBox.error({
            title: "日初始化失败！",
            content: "请检查网络连接",
          });
        });
    },
    next() {
      check()
        .then((res) => {
          console.log(res);
          this.isCheck = res.data;
          if (this.isCheck) {
            this.$hMsgBox.success({
              title: "清算完成！",
              content: "已完成订单确认",
            });
            this.updatedNodes.push(3);
            this.updatedNodes.push(4);
            this.add();
            this.add();
          }
        })
        .catch((err) => {
          console.log(err);
          this.$hMsgBox.error({
            title: "日初始化失败！",
            content: "请检查网络连接",
          });
        });
    },
    add() {
      this.current++;
      this.percent += 25;
      if (this.current == 4 || this.percent == 100) {
        this.$hMsgBox.success({
          title: "清算完成！",
          content: "已完成所有步骤",
        });
      }
    },

    labelClassName(node) {
      console.log(node);
      // 如果节点的 ID 在 updatedNodes 中，那么返回 'updated' 类
      // 否则，返回 'default' 类
      return this.updatedNodes.includes(node.id) ? "updated" : "org-bg-res";
    },
  },
};
</script>

<style>
.blue-line {
  border-left: 3px solid #298dff;
  padding-left: 10px;
}
.updated {
  background-color: #298dff;
  color: #fff;
  transition: background-color 0.5s ease;
}
.org-bg-res {
  background-color: orange;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.5s ease;
}
.card1 {
  border-radius: 4px;
  background: #fff;
  box-shadow: 5px 5px 7px #d0d0d0, -5px -5px 7px #f0f0f0;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 5vh;
}
</style>